<template>
  <div >
    <!--        {{appointmentType}}-->
    <div v-if="mode == 'list-v'" class="al-m-top-10px">
      <div v-for="(item, index) in this.appointmentType"
           :key="index"
           class="al-m-bottom-10px">
        <div class="al-box-shadow-radius al-overflow-hide al-cursor-pointer"
        @click="goPage('/appointment/type/' + item.id)">
          <ALImage :src="item.coverUrl"
                   fit="cover"
                   style="height:150px; width:100%"></ALImage>
          <div class="al-flex-container-center-h">{{item.type}}</div>
        </div>

      </div>
    </div>

    <div v-else-if="mode == 'list-h'"
         class="al-flex-wrap">
      <div v-for="(item, index) in this.appointmentType"
           :key="index"
           class="al-width-25 ">
        <div class="al-m-10px al-cursor-pointer al-hover-shadow al-overflow-hide"
             @click="goPage('/appointment/type/' + item.id)">
          <ALImage :src="item.coverUrl"
                   fit="cover"
                   class="al-hover-img "
                   style="height:150px; width:100%"></ALImage>
          <div class="al-flex-container-center-h">{{item.type}}</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import {request} from "@/util/network/request";
  import {USER_GET_ALL_COMMON} from "@/util/network/api/user/api-user";
  import {APPOINTMENT_TYPE_GET_ALL} from "@/util/network/api/appointment/api-appointment";
  import ALImage from "@/components/public/ALImage";

  export default {
    name: "AppointmentType",
    components: {ALImage},
    data() {
      return {
        appointmentType: [],

      }
    },

    props:{
      mode:{
        type: String,
        default: 'list-v'
      }
    },

    mounted() {
      this.getAppointmentType();

    },

    methods: {
      goPage(path){
        this.gotoPage(path);
      },

      getAppointmentType(pageNum = 1) {
        request({
          url: APPOINTMENT_TYPE_GET_ALL + `?pageNum=${pageNum}&pageSize=0`,
        }).then(res => {
          // console.log(res);
          this.appointmentType = res.data.data.list;
          this.appointmentType.map((item, index) => {
            item.coverUrl = this.coverUrl[index]
          });
        }).catch(err => {
          console.log(err);
        })
      },

    }
  }
</script>

<style scoped>

</style>
